
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.box {
				width: 800px;
				margin: 200px auto;
			}
			
			ul {
				float: left;
				list-style: none;
			}
			
			li {
				padding: 5px 8px;
				float: left;
				width: 115px;
			}
			
			span {
				margin-right: 5px;
				text-decoration: underline;
				color: blue;
				cursor: pointer;
			}
			
			ul:nth-child(1){
				color: white;
				background-color: deepskyblue;
			}
			button{
				width: 60px;
			}
			input{
				width: 100px;
			}
			.box1,.box2{
				margin-top: 5px;
			}
			h1{
				width: 130px;
				margin: 0 auto;
				margin-bottom: 30px;
			}
			#change1{
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<h1>捐赠管理</h1>
			<div class="box1">受捐单位
				<select id="pri">
					<option selected>--请选择--</option>
					<option>红十字会</option>
					<option>壹基金</option>
					<option>中国慈善总会</option>
					<option>中国扶贫基金会</option>
				</select>
				<button id="search">查询</button>
				<button>上一页</button>
				<button>下一页</button>
			</div>
			<div class="box2">
				捐赠人：
				<input type="text" id="more1"/>
				受捐单位:
				<select id="more2">
					<option selected>--请选择--</option>
					<option>红十字会</option>
					<option>壹基金</option>
					<option>中国慈善总会</option>
					<option>中国扶贫基金会</option>
				</select>
				金额：
				<input type="text" id="more3"/>
				受捐日期：
				<input type="text" id="more4"/>
				<button id="more">新增</button>
			</div>
			<div id="box3">
				<ul>
					<li>序号</li>
					<li>捐赠人</li>
					<li>受捐单位</li>
					<li>金额</li>
					<li>受捐日期</li>
					<li>操作</li>
				</ul>
				<ul>
					<li>1</li>
					<li>成龙</li>
					<li class="ser">红十字会</li>
					<li>1000</li>
					<li>2013-07-08</li>
					<li>
						<span class="change2">修改</span>
						<span class="del">删除</span>
					</li>
				</ul>
				<ul>
					<li>2</li>
					<li>嘿嘿</li>
					<li class="ser">壹基金</li>
					<li>2000</li>
					<li>2013-07-08</li>
					<li>
						<span class="change2">修改</span>
						<span class="del">删除</span>
					</li>
				</ul>
				<ul>
					<li>3</li>
					<li>哈哈</li>
					<li class="ser">中国慈善总会</li>
					<li>3000</li>
					<li>2013-07-08</li>
					<li>
						<span class="change2">修改</span>
						<span class="del">删除</span>
					</li>
				</ul>
				<ul>
					<li>4</li>
					<li>佚名</li>
					<li class="ser">中国扶贫基金会</li>
					<li>4000</li>
					<li>2013-07-08</li>
					<li>
						<span class="change2">修改</span>
						<span class="del">删除</span>
					</li>
				</ul>
			</div>
			<ul id="change1">
				<li></li>
				<li><input type="text" id="change1-1"/></li>
				<li class="ser"><input type="text" id="change1-2"/></li>
				<li><input type="text"id="change1-3" /></li>
				<li><input type="text" id="change1-4"/></li>
				<li>
					<span id="sure">确定</span>
					<span id="chance">取消</span>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var ul=document.querySelectorAll("ul")
			var span=document.getElementsByTagName("span")
			var more=document.getElementById("more")
			var more1=document.getElementById("more1")
			var more2=document.getElementById("more2")
			var more3=document.getElementById("more3")
			var more4=document.getElementById("more4")
			var box3=document.getElementById("box3")
			var pri=document.getElementById("pri")
			var search=document.getElementById("search")
			var ser=document.getElementsByClassName("ser")
			var change1=document.getElementById("change1")
			var change2=document.getElementsByClassName("change2")
			var del=document.getElementsByClassName("del")
			var cha1=document.getElementById("change1-1")
			var cha2=document.getElementById("change1-2")
			var cha3=document.getElementById("change1-3")
			var cha4=document.getElementById("change1-4")
			var sure=document.getElementById("sure")
			var chance=document.getElementById("chance")
			//改
			var chan;
			var inp=change1.getElementsByTagName("input")
			for(var i=0;i<change2.length;i++){
				(function(e){
					change2[e].onclick=function(){
						change1.style.display = "block";
						chan=this.parentNode.parentNode
					}
				})(i)
			}
			//确定
			sure.onclick=function(){
				var chan_li=chan.getElementsByTagName("li")
				chan_li[1].innerText=cha1.value
				chan_li[2].innerText=cha2.value
				chan_li[3].innerText=cha3.value
				chan_li[4].innerText=cha4.value
				change1.style.display = "none";
//				赋值后清空文本框内容
				for(var i=0;i<inp.length;i++){
					inp[i].value=""
				}
			}
			//取消
			chance.onclick=function(){
				change1.style.display = "none";
				for(var i=0;i<inp.length;i++){
					inp[i].value=""
				}
			}
			//删
			var chan;
			for(var i=0;i<del.length;i++){
				(function(e){
					del[e].onclick=function(){
						var bool = confirm("是否删除这行");
						if(bool){
							var del =this.parentNode.parentNode
							del.remove()
						}
						
//						}else if(this.innerText=="修改"){
//							change1.style.display = "block";
//							chan=this.parentNode.parentNode
//						}else if(this.innerText=="确定"){
//							var chan_li=chan.getElementsByTagName("li")
//							chan_li[1]=cha1.innerText
//							chan_li[2]=cha1.innerText
//							chan_li[3]=cha1.innerText
//							chan_li[4]=cha1.innerText
//						}
					}
				})(i)
			}
			//增
			//获取下拉框的文本
			var abc
			more2.onchange=function(){
				var index=more2.selectedIndex
				abc=more2[index].innerText
			}
			more.onclick=function(){
				//新增ul
				var ul1= document.createElement("ul")
				//ul赋值内容
				ul1.innerHTML="<li>"+ul.length+"</li><li>"+more1.value+"</li><li class='ser'>"+abc+"</li><li>"+more3.value+"</li><li>"+more4.value+"</li><li><span class='change2'>修改</span> <span class='del'>删除</span></li>"
				box3.appendChild(ul1)
				//给新增的子元素绑定事件
				var new1=ul1.lastChild.lastChild
				new1.onclick=function(){
					var bool = confirm("是否删除这行");
					if(bool){
						var del =this.parentNode.parentNode
						del.remove()
					}
				}
			}
			//查
			//获取查找下拉框的文本
			var bcd
			pri.onchange=function(){
				var index=pri.selectedIndex
				bcd=pri[index].innerText
			}
			search.onclick=function(){
				var ul=document.querySelectorAll("ul")
				//找到和下拉框文本一样的行
				for(var j=0;j<ser.length;j++){
					if(bcd == ser[j].innerText){
						var str=ser[j].parentNode;
						console.log(str)
					}
				}
				//删除所有行
				for(var k=1;k<ul.length;k++){   
					ul[k].remove()
				}
				//添加找到的行
				box3.appendChild(str)
			}
		</script>
	</body>

</html>
